<script setup lang="ts">
import { reactive } from 'vue'

import { dayjs, px2rem } from '@renderer/utils'
const date = reactive<{
  y: string
  m: string
  d: string
}>({
  y: '0000',
  m: '00',
  d: '00'
})
const time = reactive<{
  h: string
  m: string
  s: string
}>({
  h: '00',
  m: '00',
  s: '00'
})
const getDateTime = () => {
  date.y = dayjs().format('YYYY')
  date.m = dayjs().format('MM')
  date.d = dayjs().format('DD')
  time.h = dayjs().format('HH')
  time.m = dayjs().format('mm')
  time.s = dayjs().format('ss')
}
getDateTime()
setInterval(getDateTime, 1000)
const config = reactive({
  size: 30
})
</script>
<template>
  <div
    class="clock flex items-center justify-center h-full gap-1"
    :style="{
      '--font-size': px2rem(config.size)
    }"
  >
    <section class="flex items-center flex-row gap-1">
      <span v-for="(item, key) in time.h" :key="key">
        {{ item }}
      </span>
      <em class="colon">:</em>
      <span v-for="(item, key) in time.m" :key="key">
        {{ item }}
      </span>
      <em class="colon">:</em>
      <span v-for="(item, key) in time.s" :key="key">
        {{ item }}
      </span>
    </section>
  </div>
</template>
<style lang="scss" scoped>
* {
  font-family: 'Cc';
}
.clock {
  font-size: var(--font-size);
  span {
    @apply flex flex-row items-center justify-center bg-white text-black p-[2px] rounded-md overflow-hidden w-max;
  }
  .colon {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
</style>
